<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
        <!-- 页面5秒刷新一次 -->
        <!--<meta http-equiv="refresh" content="5">-->
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta name="author" content="test">
        <meta name="description" content="test">
        <meta name="keywords" content="test,test,test">

        <style>
            *{
                box-sizing: border-box;
                outline: none;
            }
            .container{
                position: relative;
                width: 100%;
                height: 100%;
            }

            .transition{
                width: 100px;
                height: 100px;
                border: solid 1px blueviolet;
                margin: 200px auto;
                background: lightgreen;
                text-align: center;
                line-height: 1em;
                /*过度*/
                -webkit-transition: all 2s;
                -moz-transition: all 2s;
                transition: all 2s;
            }
            .transition:hover{
                width: 200px;
                height: 200px;
                background: lightseagreen;
                -webkit-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);

                transform-origin: 50% 50%;/*default 50% 50%*/
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="transition">我是2D动画DIV</div>
        </div>
    </body>
</html>